<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Custom Input with Emojis</title>  
<style>  
  .editable-input {  
    border: 1px solid #ccc;  
    padding: 10px;  
    outline: none;  
    white-space: pre-wrap; /* Preserve whitespace */  
    word-wrap: break-word; /* Break long words */  
  }  
  .emoji {  
    width: 24px;  
    height: 24px;  
    vertical-align: middle;  
  }  
</style>  
</head>  
<body>  
  
<div class="editable-input" contenteditable="true" id="inputDiv"></div>  
<button onclick="insertEmoji()">Insert Emoji</button>  
  
<script>  
  function insertEmoji() {  
    const inputDiv = document.getElementById('inputDiv');  
    const range = window.getSelection().getRangeAt(0);  
    const emojiImg = document.createElement('img');  
    emojiImg.src = 'path/to/emoji.png'; // Replace with actual emoji image URL  
    emojiImg.className = 'emoji';  
  
    // If there is a selection, delete it  
    if (range.startContainer === range.endContainer &&  
        range.startOffset === range.endOffset) {  
      const textNode = document.createTextNode('\uFEFF'); // Zero-width no-break space  
      range.deleteContents();  
      range.insertNode(textNode);  
      range.setStartAfter(textNode);  
      range.setEndAfter(textNode);  
    }  
  
    // Split the text node at the cursor position and insert the image  
    range.deleteContents();  
    const beforeTextNode = range.startContainer.splitText(range.startOffset);  
    const afterTextNode = beforeTextNode.splitText(0);  
    range.insertNode(emojiImg);  
    range.setStartAfter(emojiImg);  
    range.setEndAfter(afterTextNode);  
  
    // Move the cursor after the image  
    const selection = window.getSelection();  
    selection.removeAllRanges();  
    selection.addRange(range);  
  }  
  
  // Additional code to handle cursor position updates, input events, etc.  
  // would be needed here for a fully functional implementation.  
</script>  
  
</body>  
</html>